/**
 * MessageItem - 单条消息组件
 * 负责渲染单条消息，区分用户和AI的消息样式
 * 支持Markdown渲染
 */
import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import remarkGfm from 'remark-gfm';
import { User, Bot } from 'lucide-react';
import { type ChatMessage } from '../model/Message';

interface MessageItemProps {
    message: ChatMessage;
}

const MessageItem: React.FC<MessageItemProps> = ({ message }) => {
    const isUser = message.role === 'user';

    const formatTimestamp = (timestamp: string) => {
        const date = new Date(timestamp);
        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    };

    return (
        <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
            <div className={`
        max-w-[85%] md:max-w-[70%] 
        rounded-2xl p-4
        ${isUser
                    ? 'bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-tr-none shadow-lg'
                    : 'bg-white border border-gray-200 rounded-tl-none shadow-md'}
      `}>
                <div className="flex items-center gap-2 mb-2">
                    <div className={`
            w-8 h-8 rounded-full flex items-center justify-center
            ${isUser
                            ? 'bg-blue-700'
                            : 'bg-gradient-to-br from-purple-500 to-indigo-600'}
          `}>
                        {isUser ? (
                            <User size={18} className="text-white" />
                        ) : (
                            <Bot size={18} className="text-white" />
                        )}
                    </div>
                    <span className={`text-sm ${isUser ? 'text-blue-100' : 'text-gray-500'}`}>
                        {isUser ? '你' : 'AI助手'} · {formatTimestamp(message.timestamp)}
                    </span>
                </div>

                <div className={`markdown-content ${isUser ? 'text-white' : 'text-gray-800'}`}>
                    <ReactMarkdown
                        remarkPlugins={[remarkGfm]}
                        components={{
                            code({ node, inline, className, children, ...props }) {
                                const match = /language-(\w+)/.exec(className || '');
                                return !inline && match ? (
                                    <SyntaxHighlighter
                                        style={vscDarkPlus}
                                        language={match[1]}
                                        PreTag="div"
                                        className="rounded-md my-2"
                                        {...props}
                                    >
                                        {String(children).replace(/\n$/, '')}
                                    </SyntaxHighlighter>
                                ) : (
                                    <code className={`${inline ? 'px-1 py-0.5 rounded bg-gray-200 text-gray-800' : ''}`} {...props}>
                                        {children}
                                    </code>
                                );
                            },
                            // 定制其他Markdown元素样式
                            p: ({ node, ...props }) => <p className="mb-2" {...props} />,
                            ul: ({ node, ...props }) => <ul className="list-disc ml-5 mb-2" {...props} />,
                            ol: ({ node, ...props }) => <ol className="list-decimal ml-5 mb-2" {...props} />,
                            h1: ({ node, ...props }) => <h1 className="text-xl font-bold my-3" {...props} />,
                            h2: ({ node, ...props }) => <h2 className="text-lg font-bold my-2" {...props} />,
                            h3: ({ node, ...props }) => <h3 className="text-md font-bold my-2" {...props} />,
                            a: ({ node, ...props }) => <a className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer" {...props} />,
                        }}
                    >
                        {message.content}
                    </ReactMarkdown>
                </div>
            </div>
        </div>
    );
};

export default MessageItem;
